{% extends 'front/page/blog/blog_list_base.html' %}

{% block title %}公开博客详情{% endblock %}

{% block left %}
<div class="card my-4 p-3">
    <div class="d-flex align-items-center">
        <!-- 用户头像 -->
        <img id="user-avatar" src="" alt="头像" class="img-thumbnail me-3" style="width: 80px; height: 80px; object-fit: cover;">

        <!-- 用户信息 -->
        <div class="d-flex flex-column">
            <span class="mb-1">
                <strong>用户：</strong>
                <a id="user-name" href="#" class="text-decoration-none" target="_blank">用户名加载中...</a>
            </span>
            <span class="mb-1"><strong>管理员：</strong><span id="user-admin">否</span></span>
            <span class="mb-1"><strong>角色：</strong><span id="user-role">加载中</span></span>
        </div>
    </div>

    <hr>
    <p><strong>粉丝数：</strong><span id="user-fans">0</span></p>
    <p><strong>发布帖子数：</strong><span id="user-published">0</span></p>
    <p><strong>总获点赞数：</strong><span id="user-get-likes">0</span></p>
    <hr>
    <p id="user-intro">用户简介加载中...</p>
</div>

<!-- 用户互动功能卡片 -->
<div class="card my-4 p-3">
    <h5 class="card-title">用户互动</h5>
    <hr>

    <!-- 关注和点赞按钮占满卡片宽度 -->
    <div class="d-flex">
        <!-- 关注按钮 -->
        <button id="follow-btn" class="btn btn-outline-primary btn-sm flex-grow-1 me-2" onclick="toggleFollow()">
            <span id="follow-text">关注用户</span>
        </button>

        <!-- 点赞帖子按钮 -->
        <button id="like-btn" class="btn btn-outline-danger btn-sm flex-grow-1" onclick="toggleLike()">
            <span id="like-text">点赞帖子</span>
        </button>
    </div>

    <!-- 评论功能 -->
    <div class="mt-3">
        <textarea id="comment-input" class="form-control mb-2" rows="3" placeholder="写下你的评论..."></textarea>
        <button id="comment-submit" class="btn btn-primary btn-sm">发布评论</button>
    </div>
</div>

{% endblock %}

{# ===== 右侧内容区：帖子详情 ===== #}
{% block right %}
<div class="container my-4">
    <!-- 帖子信息 -->
    <div class="card mb-4 p-4">
        <!-- 标题 -->
        <h2 class="fw-bold" id="post-title">标题加载中...</h2>
        <hr>

        <!-- 正文 -->
        <div id="post-content" class="mb-4">内容加载中...</div>

        <!-- 帖子元信息 -->
        <div class="text-muted small">
            <p><strong>发布时间：</strong><span id="post-time">发布时间加载中...</span></p>
            <p><strong>点赞数：</strong><span id="post-likes-count">0</span> 个点赞</p>
            <p><strong>评论数：</strong><span id="post-comments-count">0</span> 条评论</p>
            <p><strong>pid：</strong><span id="post-id">加载中...</span></p>

        </div>
    </div>

    <!-- 评论列表 -->
    <div class="card p-3">
        <h4>评论</h4>
        <ul id="comments-list" class="list-group list-group-flush"></ul>
    </div>
</div>
{% endblock %}
{% block script %}
<script>

function deleteComment(url) {
    if (!confirm('确定删除这条评论吗？')) return;
    Fetch(url, 'delete', {}, async res => {
        if (res.status === 'success') {
            await Flash('评论已删除', 1200);
            Redirect();
        } else {
            await Flash('删除失败，请重试', 1200);
        }
    });
}

const post_info_detail_url = '{{ url_for("postinfopublisheddetail", pid=pid) }}';
let postData = null;

Fetch(post_info_detail_url, 'get', {}, res => {
    if (res.status !== 'success') return alert('加载失败，请稍后重试');
    postData = res.data;

    const $ = id => document.getElementById(id);

    // 用户信息
    $('user-avatar').src = postData.personal.img_icon || '/static/img/default.png';
    $('user-name').textContent = postData.username || '未知用户';
    $('user-role').textContent = postData.role || '未知';
    $('user-admin').textContent = postData.admin ? '是' : '否';
    $('user-fans').textContent = postData.fans?.length || 0;
    $('user-published').textContent = postData.published?.length || 0;
    $('user-get-likes').textContent=postData.user_get_likes || 0;
    $('user-intro').textContent = postData.personal.intro || '暂无简介';

    // 帖子内容
    $('post-title').textContent = postData.post.title || '无标题';
    $('post-time').textContent = postData.post.time || '未知时间';
    $('post-id').textContent=postData.post.pid || '未知pid';
    $('post-content').innerHTML = postData.post.content || '无内容';
    $('post-likes-count').textContent = postData.this_post_get_likes?.length || 0;
    $('post-comments-count').textContent = postData.comments?.length || 0;

    // 评论列表
// 评论列表
const commentsList = $('comments-list');
commentsList.innerHTML = postData.comments?.length
    ? postData.comments.map(c => {
        const deleteBtn = c.delete_url
            ? `<button class="btn btn-sm btn-outline-danger float-end" onclick="deleteComment('${c.delete_url}')">删除</button>`
            : '';
        return `
            <li class="list-group-item">
                <strong>用户 <a href="/user/${c.uid}" target="_blank">${c.uid}</a></strong> 于 <em>${c.time}</em> 评论：
                ${deleteBtn}
                <div>${c.content}</div>
            </li>
        `;
    }).join('')
    : '<li class="list-group-item">暂无评论</li>';




    // 通用状态按钮处理函数
function getToggleStates(alreadyLike, alreadyFollow, likeUrl, followUrl) {
    return {
        like: {
            text: alreadyLike ? '已点赞' : '点赞帖子',
            class: alreadyLike ? 'btn-danger text-white' : 'btn-outline-danger',
            method: alreadyLike ? 'delete' : 'post',
            url: likeUrl
        },
        follow: {
            text: alreadyFollow ? '已关注' : '关注用户',
            class: alreadyFollow ? 'btn-primary text-white' : 'btn-outline-primary',
            method: alreadyFollow ? 'delete' : 'post',
            url: followUrl
        }
    };
}

    status_ = getToggleStates(postData.already_like, postData.already_follow, postData.urls.like_or_cancel, postData.urls.follow_or_cancel)


function setupButton(btnId, status) {
    const btn = $(btnId);
    const span = btn.querySelector('span');

    // 设置文本和按钮样式
    span.textContent = status.text;
    btn.classList.add('btn', 'btn-sm', 'flex-grow-1');
    btn.classList.add(...status.class.split(' ')); // 分割并添加class

    btn.onclick = () => {
        Fetch(status.url, status.method, {}, async res => {
            if (res.status !== 'success') {
                await Flash('操作失败',1200);
                Redirect();
            }
            await Flash('操作成功',1200);
            Redirect();
        });
    };
}

    setupButton('like-btn', status_.like);
    setupButton('follow-btn', status_.follow);


    //评论
    Event_('comment-submit','click',async event => {
        data = Pack({'comment-input': 'content'})

        if (data.content === '') {
            await Flash('评论不能为空', 1200)
            return
        }

        Fetch(postData.urls.comment_or_cancel, 'post', data, async res => {
            if (res.status === 'success') {
                await Flash('操作成功', 1200);
                Redirect();
            }
        })
    })
})
</script>
{% endblock %}
